<script>
export default {
    props: ['data'], // 表格渲染的内容
    data() {
        return {
            labels: [],
            props: []
        }
    },
    methods: {
        addLabels(val) {
            console.log("table ==>" + val)
            this.labels.push(val)
        },
        test(name) {
            console.log("my name is " + name)
        },
        addColumns(val) {
            this.props.push(val)
        }
    },
    // 祖先传递数据 可以传递 方法
    provide() {
        return {
            test: this.test,
            addLabels: this.addLabels,
            addColumns: this.addColumns
        }
    }

}
</script>

<template>
    <table>
        <tr>
            <!--如何获取 labels 和 props-->
            <th v-for="label in labels">{{ label }}</th>
        </tr>
        <!--行-->
        <tr v-for="row in data">
            <!--列-->
            <td v-for="prop in props">{{ row[prop] }}</td>
        </tr>
    </table>
    <slot></slot>
</template>

<style scoped>

</style>